<template>
  <section>
    <div class="model arrange">
      <div class="pink">安排工作</div>
      <div class="form">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="收件人">
            <el-input type="textarea" v-model="form.name" :disabled="true" :autosize="{ minRows: 1, maxRows: 3}" resize='none'></el-input>
          </el-form-item>
          <el-form-item label="工作内容">
            <el-input type="textarea" v-model="form.desc" :autosize="{ minRows: 6}"></el-input>
          </el-form-item>
          <el-form-item label="上传附件">
            <el-upload
              class="upload-demo"
              ref="upload"
              :action="`${this._httpUrl}coordinationOffice/arrangeWork/upload`"
              :headers= "this.xtoken"
              :on-preview="handlePreview"
              :on-success="successPreview"
              :on-remove="handleRemove">
              <el-button slot="trigger" size="small" type="primary">选取附件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText">
        </el-input>

        <el-tree
          @check-change="checkChange"
          class="filter-tree"
          :data="data2"
          :props="defaultProps"
          show-checkbox
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree2">
        </el-tree>
      </div>
      <div class="clear"></div>
      <div class="bottom">
        <button class="btn btn-danger" @click="submitAll">确认发送</button>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      xtoken: {},
      form: {
        name: null,
        desc: null,
        appendix: {}
      },
      filterText: null,
      senderData: {},
      attachments: [],
      data2: [{
        id: 1,
        label: '行政部',
        children: [{
          id: 6,
          label: '欧阳俊逸1-1'
        },
        {
          id: 7,
          label: '欧阳俊逸1-2'
        }]
      },
      {
        id: 2,
        label: '行政部',
        children: [{
          id: 8,
          label: '欧阳俊逸2-1'
        },
        {
          id: 9,
          label: '欧阳俊逸2-2'
        }]
      },
      {
        id: 3,
        label: '行政部',
        children: [{
          id: 10,
          label: '欧阳俊逸'
        },
        {
          id: 11,
          label: '欧阳俊逸'
        }]
      },
      {
        id: 4,
        label: '行政部',
        children: [{
          id: 12,
          label: '欧阳俊逸'
        },
        {
          id: 13,
          label: '欧阳俊逸'
        }]
      },
      {
        id: 5,
        label: '行政部',
        children: [{
          id: 14,
          label: '欧阳俊逸'
        },
        {
          id: 15,
          label: '欧阳俊逸'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree2.filter(val)
    }
  },
  mounted () {
    // let _cookie = document.cookie.split(';')
    // let _cookieArray = []
    // _cookie.forEach(v => {
    //   let _d = v.split('=')
    //   _cookieArray.push({
    //     key: _d[0],
    //     value: _d[1]
    //   })
    // })
    this.xtoken = {'yxt-xtoken': localStorage.xtoken}
    this.$http.post(this._httpUrl + 'public/schoolGroupAndTeachers', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        this.data2 = response.data.data
        for (var i = 0; i < this.data2.length; i++) {
          this.data2[i].label = this.data2[i].groupName
          this.data2[i].children = this.data2[i].teachers
          for (var a = 0; a < this.data2[i].teachers.length; a++) {
            this.data2[i].children[a].label = this.data2[i].teachers[a].teacherName
            this.data2[i].children[a].id = this.data2[i].teachers[a].id
          }
        }
      } else if (response.body.code === '887') {
        this.$router.push('/')
      } else if (response.body.code === '889') {
        this.$router.push('/')
      }
    })
  },
  methods: {
    getCheckedNodes () {},
    checkChange (leafOnly) {
      let dataRecieve = []
      for (var i = 0; i < this.$refs.tree2.getCheckedNodes(leafOnly).length; i++) {
        dataRecieve.push(this.$refs.tree2.getCheckedNodes(leafOnly)[i].label)
      }
      this.form.name = dataRecieve.join(',')
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    // submitUpload () {
    //   this.$refs.upload.submit()
    // },
    successPreview (file) {
      this.attachments = file.data
    },
    handlePreview (file) {
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    submitAll (leafOnly) {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.senderData = this.$refs.tree2.getCheckedNodes(leafOnly)
      let temp = []
      for (var i = 0; i < this.senderData.length; i++) {
        // delete this.senderData[i].label
        let obj = {
          sendee: this.senderData[i].name,
          sendeeId: this.senderData[i].id
          // openid: this.senderData[i].openid,
          // sendeeType: '2'
        }
        temp.push(obj)
      }
      this.$http.post(this._httpUrl + 'coordinationOffice/arrangeWork',
        {
          content: this.form.desc,
          // templateCode: 'FAwrnNEibx-RQWMLyKosyQZcNns7oM6NHBYTmsk-NTw',
          sendees: temp,
          attachments: this.attachments
        }, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
          if (response.body.code === '000') {
            // window.location.href = '/#/arrangeWork'
            this.$router.push('/coordinationOffice/arrangeWork')
          } else if (response.body.code === '887') {
            this.$router.push('/')
          } else if (response.body.code === '889') {
            this.$router.push('/')
          }
        })
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
@import '/static/css/material-dashboard.css';
  .arrange{
    .pink{
      width: 104px;
      height: 64px;
      position: absolute;
      left: 3%;
      top: -20px;
      background: #E12C6C;
      border-radius: 4px;
      text-align: center;
      line-height: 70px;
      color: #fff;
    }
    .form{
      width: 60%;
      margin-top: 50px;
      margin-left: 5%;
      padding-bottom: 20px;
      float: left;
      .text{
        width: 87%;
      }
    }
    .right{
      width: 30%;
      float: right;
      margin-right: 4%;
      margin-top: 50px;
    }
    .clear{
      clear:both;
    }
    .bottom{
      text-align: center;
      padding: 0;
      padding-top: 40px;
      padding-bottom: 30px;
    }
  }
</style>
